<!-- 商家销量统计的横向图 -->
<template>
    <div class="com-container">
        <div class="com-chart" ref="seller_ref">
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            chartInstance: null,
            allData: null,
            currentPage: 3,
            totalPage: 0,
            timerId: null,
        }
    },
    created() {
        this.$socket.registerCallBack('sellerData', this.getData)
    },
    mounted() {
        this.initChart()
        // this.getData()
        this.$socket.send({
            action: 'getData',
            socketType: 'sellerData',
            chartName: 'seller',
            value: '',
        })
        window.addEventListener('resize', this.screenAdapt)
        this.screenAdapt()
    },
    destroyed() {
        clearInterval(this.timerId)
        this.$socket.unRegisterCallBack('sellerData')
        window.removeEventListener('resize', this.screenAdapt)
    },
    methods: {
        // 初始化元素 ref在mounted之后才能被使用
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.seller_ref, this.theme)
            const initOption = {
                title: {
                    text: ' I 商家销售统计',
                    textStyle: {
                        fontSize: 66
                    },
                    left: 20,
                    top: 20
                },
                grid: {
                    top: '1%',
                    left: '3%',
                    right: '6%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'category',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        z: 0,
                    },
                    lineStyle: {
                        width: 66,
                        color: '#2d3433'
                    }
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 66,
                        label: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        itemStyle: {
                            // 渐变色的设置
                            barBorderRadius: [0, 33, 33, 0],
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                {
                                    offset: 0,
                                    color: '#5052EE',
                                },
                                {
                                    offset: 1,
                                    color: '#AB6EE5',
                                },
                            ]),
                        }
                    }
                ],
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timerId)
            })
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })

        },
        getData(ret) {
            // http://17.0.0.1:8888
            // const { data: ret } = await this.$http.get('seller')
            this.allData = ret
            this.allData.sort((a, b) => {
                return a.value - b.value
                // 小到大排序
            })
            this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
            this.updateChart()
            // 启动定时器
            this.startInterval()
        },
        updateChart() {
            const start = (this.currentPage - 1) * 5;
            const end = this.currentPage * 5
            const showData = this.allData.slice(start, end);
            const sellerNames = showData.map((item) => {
                return item.name
            })
            const sellerValues = this.allData.map((item) => {
                return item.value
            })
            const dataOption = {
                yAxis: {
                    data: sellerNames,
                },
                series: [
                    {
                        data: sellerValues,
                    }
                ],
            }
            this.chartInstance.setOption(dataOption)
        },
        startInterval() {
            if (this.timerId) {
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(() => {
                this.currentPage++;
                this.currentPage = this.currentPage > this.totalPage ? 1 : this.currentPage
                this.updateChart()
            }, 3000);
        },
        screenAdapt() {
            const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
            const adaptOption = {
                title: {
                    textStyle: {
                        fontSize: titleFontSize
                    },
                },
                tooltip: {
                    lineStyle: {
                        width: titleFontSize,
                    }
                },
                series: [
                    {
                        barWidth: titleFontSize,
                        itemStyle: {
                            // 渐变色的设置
                            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
                        }
                    }
                ],
            }
            this.chartInstance.setOption(adaptOption)
            this.chartInstance.resize();
        }
    },
    computed:{
        ...mapState(['theme'])
    },
    watch:{
        theme(){
            this.chartInstance.dispose()//销毁当前图标
            this.initChart()
            this.screenAdapt()
            this.updateChart()//更新图表数据 屏幕适配
        }
    }
}
</script>

<style lang="scss" scoped></style>